<template>
  <div class="taskTable" v-show="visibled">
    <!-- 关闭按钮 -->
    <div class="closebtn" @click="cancel">
      <i class="el-icon-error"></i>
    </div>
    <!-- 任务的详情页面 -->
    <article>
      <header>
        <span class="To"
          ><i class="el-icon-check"></i>任务 {{ To }}-{{ task.id }}</span
        >
        <span class="name"> | {{ project.name }}</span>
      </header>
      <div class="taskTable-content">
        <div class="setion">
          <div class="story">
            <i class="el-icon-s-flag"></i> 用户故事：<span
              >{{ To }}-{{ userstory.id }}</span
            >
            {{ userstory.title }}
          </div>
          <div class="body">
            <textarea v-model="FormData.taskGoal"></textarea>
            <div class="miaoshu">
              <ul>
                <li>
                  <label for="status" style="color: gray; font-size: 16px"
                    >当前状态：
                    <select
                      v-model="FormData.statuss"
                      name="status"
                      style="outline: none"
                      :class="
                        FormData.statuss === '未开始'
                          ? 'a'
                          : FormData.statuss === '进行中'
                          ? 'b'
                          : FormData.statuss === '已完成'
                          ? 'c'
                          : FormData.statuss === '已关闭'
                          ? 'd'
                          : ''
                      "
                    >
                      <option
                        v-for="(s, index) in FormData.sectionStatus"
                        :key="index"
                        :value="s.pro"
                        :label="s.pro"
                      ></option>
                    </select>
                  </label>
                </li>
                <li>
                  <label for="username" style="color: gray; font-size: 16px"
                    >负责人：<input
                      type="text"
                      name="username"
                      v-model="FormData.username"
                  /></label>
                </li>
                <li>
                  <label for="time" style="color: gray; font-size: 16px"
                    >工时：<input
                      type="number"
                      v-model="FormData.time"
                      name="time"
                  /></label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
import "@/assets/css/taskFormation.css";
export default {
  name: "taskFormation",
  props: ["visibled", "task", "rows"],
  inject: ["reload"],
  data() {
    return {
      project: JSON.parse(window.localStorage.getItem("project")),
      userstory: "",
      //修改任务的参数
      FormData: {
        taskGoal: "",
        time: "",
        username: "曾召雪",
        statuss: "",
        sectionStatus: [
          { pro: "未开始" },
          { pro: "进行中" },
          { pro: "已关闭" },
          { pro: "已完成" },
        ],
      },
    };
  },
  computed: {
    To: function () {
      return this.project.name.substring(0, 3);
    },
  },
  watch: {
    task: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$set(this.FormData, "taskGoal", newVal.taskGoal);
          this.$set(this.FormData, "time", newVal.time);
          if (newVal.status == "1") {
            this.FormData.statuss = "未开始";
          } else if (newVal.status == "2") {
            this.FormData.statuss = "进行中";
          } else if (newVal.status == "3") {
            this.FormData.statuss = "已完成";
          } else if (newVal.status == "4") {
            this.FormData.statuss = "已关闭";
          }
          //获取当前任务的用户故事
          this.$http({
            method: "post",
            url: `userStory/selectUserStoryById?userStoryId=${newVal.userStoryId}`,
          }).then(({data}) => {
            if (data.flag) {
              this.userstory = data.data;
            } else {
              console.log(data);
            }
          });
        }
      },
    },
    FormData: {
      deep: true,
      handler(newVal, oldVal) {
        let obj = {};
        if (this.FormData.statuss == "未开始") {
          obj.status = 1;
        } else if (this.FormData.statuss == "进行中") {
          obj.status = 2;
        } else if (this.FormData.statuss == "已完成") {
          obj.status = 3;
        } else if (this.FormData.statuss == "已关闭") {
          obj.status = 4;
        }
        obj.id = this.task.id;
        obj.taskGoal = newVal.taskGoal;
        obj.time = newVal.time;
        this.$http({
          method: "post",
          headers: {
            "content-type": "application/json",
          },
          url: "task/updateTask",
          data: JSON.stringify(obj),
        }).then(({data}) => {
          if (data.flag) {
          } else {
          }
        });
      },
    },
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:visibled", false);
      this.reload();
    },
  },
};
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
</style>